<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>yanzhrng</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        span{
            float: left;
            /* width: 64px; */
            text-align: center;
        }
        ul{
            width: 430px;
        }
        ul>span{
            color: red;
            display: none;
        }
        li{
            width: 240px;
            height: 21px;
            text-align: center;
            float: left;
            /* display: inline-block; */
        }
        li span{
            width: 64px;
        }
        li.cup{
            height: 152px;
        }
        input,textarea{
            float: left;
        }
        li.sub input{
            float: none;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li><span>用户名</span> <input type="text" id="username" name="username"></li>
            <span></span>
            <li><span>密码</span><input type="password" name="password" id="password"></li>
            <span></span>
            <li><span>邮箱</span><input type="text" name="email" id="email"></li>
            <span></span>
            <li class="cup"><span>个性标签</span><textarea name="" id="" cols="20" rows="10" name="theme"></textarea></li>
            <li class="sub"><input type="submit" value="提交"></li>
        </ul>
    </div>
    <script>
        var inputs = document.querySelectorAll('input');
        var spans = document.querySelectorAll('li span');
        var spanns = document.querySelectorAll('ul>span');
        var text = document.querySelector('textarea');
        var uname = document.querySelector('#username');//用户名
        var pwd = document.querySelector('#password');//mima
        var email = document.querySelector('#email');
        function get(event) {
            event.onfocus = function () {
                event.value = '';
            }
        }
        for (var i = 0; i < inputs.length; i++) {
            get(inputs[i]);
        }
        get(text);
        //获得焦点是去掉空值
        function valify() {
            inputs.forEach(function (v, k) {
                console.log(1);
                v.onfocus = function(){
                    v.value = "";
                    spanns.forEach(function(v,k){
                        v.style.display = 'none';
                        // console.log(10);
                    })
                }
                // v.onblur = function () {
                //     //是否存在空值
                //     if (v.value == '') {
                //         spanns[k].innerHTML = spans[k].innerHTML + '不能为空';
                //         // spanns[k].style.color = 'red';
                //         console.log(2);
                //         console.log(spanns[k].innerHTML);
                //     }
                // }
            })
        }
        valify();
        uname.onblur = function () {
            // 匹配用户名是否有特殊符号
            if (/\W/.test(inputs[0].value)) {
                spanns[0].style.display = 'block';
                spanns[0].innerHTML = '请使用英文字母、数字或下划线';
            }
            if (inputs[0].value.length < 5) {
                console.log(1);
                spanns[0].style.display = 'block';
                spanns[0].innerHTML = '长度至少为5位数';
            }
        }
        pwd.onblur = function () {
            //匹配密码是否由数字,大写字母,小写字母组成，至少其中两种
            if (!/^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)\S{6,}$/.test(inputs[1].value)) {
                spanns[1].style.display = 'block';
                spanns[1].innerHTML = '由数字,大写字母,小写字母,至少其中两种组成，且长度不小于8';
            }
        }
        email.onblur = function () {
            //匹配邮箱
            if (!/^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9]+)\.([a-z0-9]{1,})$/.test(inputs[2].value)) {
                console.log(spanns[2]);
                spanns[2].style.display = 'block';
                spanns[2].innerHTML = '可以使用英文（包括大小写）、数字、点号、下划线、减号，首字母必须是字母或数字';
            }
        }
       
    </script>
</body>

</html>